import { DatePicker, Button, Space } from '@arco-design/web-react';

const { RangePicker } = DatePicker;

const style = { width: 220, margin: '0 24px 24px 0' };

function onSelect(dateString: Array<string>, date) {
    console.log('onSelect', dateString, date);
}

function onChange(dateString: Array<string>, date) {
    console.log('onChange: ', dateString, date);
}

function onOk(dateString: Array<string>, date) {
    console.log('onOk: ', dateString, date);
}

export default function safeReport() {
    return (
        <div className="contain_box">
            <div className='contain_banner'>
                安全报表
            </div>
            <div className='form_box'>
                <div className="form_ul">
                    报告时间范围:
                    <RangePicker
                        style={{ ...style, width: 320 }}
                        showTime={{ defaultValue: ['00:00', '04:05'], format: 'HH:mm' }}
                        format='YYYY-MM-DD HH:mm'
                        onChange={onChange}
                        onSelect={onSelect}
                        onOk={onOk}
                    />
                </div>
                <Space>
                    <Button type='outline'>重置</Button>
                    <Button type='primary'>查询</Button>
                </Space>
            </div>
        </div>
    )
}